var height = $(document.body).height()+"px";
//用react封装
var currentpage = 1,totlepage = 1,i,pagecount=15;//分页的当前页和总的页数
//表单数据：学校页面的对应注解：学校名称 考勤区域  隶属地区 设备自定义套餐（扩展）学校id
var priceData = [];
//表单的最高高度、当前第几页、总页数、总行数、设备投放切换、箱号
var otherData = {maxHeight:'0px',currentpage:0,totlepage:0,totlerows:0,pageLeft:0,pageRight:0,view:'',boxOrdevice:'device',batchNumber:'',upBatchNumber:''};
var Page = React.createClass({
    render: function () {
        {
            var items = [],
                svar = this;
            var onPageClickArray = [this.onPageClick];
            if(totlepage < 6){
                for(i = 1;i <= totlepage ;i++) {
                    if (i == currentpage) {
                        items.push({num:i,checked:true})
                    } else {
                        items.push({num:i,checked:false})
                    }
                }
            }else if(currentpage >= (totlepage-2)) {//点在左边
                items.push({num:1,checked:false});
                items.push({num:'···',checked:false});
                for(i = totlepage-2;i <= totlepage ;i++){
                    if(i == currentpage){
                        items.push({num:i,checked:true})
                    }else{
                        items.push({num:i,checked:false})
                    }
                }
            }else if(currentpage <= 3){
                for(i = 1;i <= 3 ;i++) {
                    if (i == currentpage) {
                        items.push({num:i,checked:true})
                    } else {
                        items.push({num:i,checked:false})
                    }
                }
                items.push({num:'···',checked:false});
                items.push({num:totlepage,checked:false})
            }else {//点在两边
                items.push({num:1,checked:false});
                items.push({num:'···',checked:false});
                items.push({num:currentpage-1,checked:false});
                items.push({num:currentpage,checked:true});
                items.push({num:currentpage+1,checked:false});
                items.push({num:'···',checked:false});
                items.push({num:totlepage,checked:false})
            }
        }
        return (
            <div className="tableInfo-page">
                <div className="page-number">每页{pagecount}条</div>
                <div className="page-limit">
                    <ol className="page-limit-ol">
                        <ol className="page-limit-ol">
                            <li className="page-limit-img" name="-1" onClick={otherData.pageLeft == 0?'':svar.props.onPageClick.bind(svar,-1)} ><span className={otherData.pageLeft == 0?'page-limit-left-no':'page-limit-left-yes'}/></li>
                            {
                                items.map(function (item) {
                                    return (<li onClick={isNaN(item.num)?'':svar.props.onPageClick.bind(svar,item.num)}  className={item.checked == true?'page-limit-num page-limit-checked':'page-limit-num'} name={item.num}>{item.num}</li>)
                                })
                            }
                            <li className="page-limit-img" name="-2" onClick={otherData.pageRight == 0?'':svar.props.onPageClick.bind(svar,-2)} ><span className={otherData.pageRight == 0?'page-limit-right-no':'page-limit-right-yes'}/></li>
                        </ol>
                    </ol>
                </div>
            </div>
        );
    },
});
//设备零售价
var PriceSetMealTable = React.createClass({
    render: function () {
        return (
            <tr>
                <td style={{width: '30%'}}>{this.props.devicetype==1?"手表":(this.props.devicetype==2?"智能学生证":"考勤卡")}</td>
                <td style={{width: '30%'}}>{this.props.fee}</td>
                <td style={{width: '30%'}}><div className="trButton" onClick={this.props.onClickEdit}>设置</div></td>
            </tr>
        );
    }
});
//新增或修改设备零售价
var AddPriceSetMeal = React.createClass({
    //关闭弹出层
    onClickHidePop: function () {
        $(".initializeMenu", window.parent.document).hide();//父页面的遮罩
        $(".addPriceSetMeal").hide();
        $(".errorMsg").hide();
    },
    //保存
    onClockSavePrice: function () {
        var svar = this;
        var id=$("#price_id").val();
        if($("#price_fee").val()==""){
            $(".errorMsg").show();
            return;
        }
        var url=serverUrl+'/devicePriceManage/addDevicePrice.json';
        var param="param={";
        if(id!=null && id!=""){
            param = getJsonDataNotEmpty(param,"id",$("#price_id").val());
            url=serverUrl+'/devicePriceManage/modifyDevicePrice.json';
        }
        param = getJsonDataNotEmpty(param,"devicetype",$("#price_devicetype").val());
        param = getJsonDataNotEmpty(param,"fee",$("#price_fee").val());
        param += "}";
        suixun.showLoding();//显示加载中
        $.ajax({
            url:url,
            data:param,
            dataType:'json',
            success:function (data) {
                suixun.hideLoding(200);//隐藏加载中
                if(data!=null && data.code == 200){
                    suixun.alert("操作成功",function (data) {
                        if(data){
                            svar.onClickHidePop();
                            svar.props.onClickDeviceRetailPrice();
                        }
                    });
                } else {
                    suixun.alert((data!=null && data.msg!=null)?data.msg:"操作失败");
                }
            }.bind(this),
            error: function (req,info,error) {
                top.location.href = invalidUrl;
            }
        });
    },
    onBlurImei: function () {
        if($("#price_fee").val()=="")
            $(".errorMsg").show();
        else
            $(".errorMsg").hide();
    },
    render: function () {
        return (
            <div  className="pop popPhone addPriceSetMeal popModel">
                <div className="model"></div>
                <div className="pop-info popModel-info">
                    <div className="pop-title popModel-title">
                        <span className="pop-title-content popModel-title-content">
                            <span className="pop-title-content-solid-left popModel-title-content-solid-left"/>
                            编辑设备零售价
                            <span className="pop-title-content-solid-right popModel-title-content-solid-right"/>
                        </span>
                        <span className="pop-title-img popModel-title-img" onClick={this.onClickHidePop}><img src="../img/icon/close.png" alt="关闭"/></span>
                        <input type="hidden" name="price_id" id="price_id" />
                    </div>
                    <div className="popModel-body ">
                        <div className="popModel-body-input">
                            <span className="popModel-body-input-title">设备类型</span>
                            <span className="popModel-body-input-content" >
                                <select className="export-factory" id="price_devicetype">
                                    <option value="2" selected="selected">智能学生证</option>
                                    <option value="1">手表</option>
                                    <option value="3">考勤卡</option>
                                </select>
                            </span>
                        </div>

                        <div className="popModel-body-input">
                            <span className="popModel-body-input-title">设备零售价</span>
                            <span className="popModel-body-input-content">
                                <input className="input-content export-imei" onBlur={this.onBlurImei} id="price_fee" type="number" placeholder="请输入设备零售价" maxLength="14" />
                            </span>
                            <div className="errorMsg " ></div>
                        </div>
                    </div>
                    <div className="popModel-button" style={{marginTop:"-35px"}}>
                        <span className="popModel-button-ok" onClick={this.onClockSavePrice}>确定</span>
                    </div>
                </div>
            </div>
        );
    }
});

//设备零售价
var DeviceRetailPrice = React.createClass({
    onClickDeviceRetailPrice:function(){
        suixun.showLoding();//显示加载中
        this.props.onClickDeviceRetailPrice();
    },
    //点击新增
    onClickAdd: function () {
        $("#price_id").val("");
        $("#price_devicetype").val("2");
        $("#price_fee").val("");
        $(".initializeMenu", window.parent.document).show();//父页面的遮罩
        $(".addPriceSetMeal").show();
    },
    //点击修改
    onClickEdit: function (info) {
        $("#price_id").val(info[0]);
        $("#price_devicetype").val(info[1]);
        $("#price_fee").val(info[2]);
        $(".initializeMenu", window.parent.document).show();//父页面的遮罩
        $(".addPriceSetMeal").show();
    },
    //保存
    onClockSave: function () {
        $(".devicePrice").attr("readonly",false).removeClass(" devicePriceEdit");
        $(".updateDevicePrice").html("修改");
    },
    render: function () {
        {
            var svar = this;
            var clickArray = [this.onClickEdit];
            var Tabels = priceData.map(function (data) {
                return (
                    <PriceSetMealTable key={data.id} onClickEdit={clickArray[0].bind(svar,[data.id,data.devicetype,data.fee])}  id={data.id}  devicetype={data.devicetype}  fee={data.fee}  />
                )
            })
        }
        return (
            <div>
                <AddPriceSetMeal onPageClick={this.onPageClick} onClickDeviceRetailPrice={this.onClickDeviceRetailPrice}/>
                <header>
                    <div className="header-left">
                        <div className="header-left-studentInfo">设备零售价</div>
                        <div className="header-left-annotationsInfo">
                            <img src="../img/icon/annotations.png" />
                            <span className="header-left-annotations-arrowsLeft"></span>
                            <div className="header-left-annotations">这里是注释。</div>
                        </div>
                    </div>
                    <div className="header-right">
                        <div className="addButton" onClick={this.onClickAdd}>
                            <span className="addButton-img"><img src="../img/icon/add-white.png" /></span>
                            <span className="addButton-text">新增</span>
                        </div>
                    </div>
                </header>
                <div className="studentsInfo tableInfo">
                    <div className="studentsInfo-data tableInfo-data tableInfo">
                        <div className="studentsInfo-data tableInfo-data">
                            <div className="studentsInfo-data-table tableInfo-data-table" >
                                <table className="head-body head-body">
                                    <thead>
                                        <th style={{width: '30%'}}>设备类型</th>
                                        <th style={{width: '30%'}}>设备零售价</th>
                                        <th style={{width: '30%'}}>设置</th>
                                    </thead>
                                    <tbody>
                                        {Tabels}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <footer id="copyright" >
                    <span><img src="../img/icon/copyright.png"/>{copyright}</span>
                </footer>
            </div>
        )
    }
});
//父组件
var Main = React.createClass({
    //组件初始状态
    getInitialState: function () {
        return {otherData:this.props.otherData,priceData:this.props.priceData}
    },
    componentDidMount: function () {
        this.onClickDeviceRetailPrice();
    },
    //学校
    onClickSchool: function () {
        window.location.href = "../schoolManage/querySchoolList.html";
    },
    //设备投放
    onClickDeviceDelivery: function () {
        window.location.href = "../deviceInitManage/queryDeviceInitList.html";
    },
    //SIM卡投放
    onClickSIMDelivery: function () {
        window.location.href = "../simInfoManage/querySimInfoList.html";
    },
    //设备套餐
    onClickDeviceSetMeal: function () {
        window.location.href = "../packageManage/queryPackageList.html";
    },
    //设备零售价
    onClickDeviceRetailPrice: function () {
        otherData.view = "deviceRetailPrice";
        priceData = [];
        var param="param={";
        param = getJsonDataNotEmpty(param,"pagecount",100+"");
        param += "}";
        $.ajax({
            url:serverUrl+'/devicePriceManage/queryDevicePriceList.json',
            data:param,
            dataType:'json',
            success:function (data) {
                setTimeout(function () {
                    suixun.hideLoding();//隐藏加载中
                },500);
                if(data.code == 200){
                    for(var i=0;i<data.info.queryresult.length;i++){
                        var obj=data.info.queryresult[i];
                        priceData[i] = {id:obj.id,devicetype:obj.devicetype,fee:obj.fee};
                    }
                    otherData = {maxHeight:height,currentpage:1,totlepage:data.info.totlepage,totlerows:data.info.totlerows,pageLeft:0,pageRight:1,view:'deviceRetailPrice',batchNumber:'',upBatchNumber:''};
                    currentpage = 1,totlepage = data.info.totlepage;//初始化的时候赋值：分页的当前页和总的页数
                    this.setState({priceData:priceData,otherData:otherData});
                }
            }.bind(this),
            error: function (req,info,error) {
                top.location.href = invalidUrl;
            }
        });
    },
    render: function () {
        return (
            <div className="outside" >
                <div className="deviceRetailPrice tableManage-body ">
                    <div className="header-menu"  >
                        <ul>
                            <li onClick={this.onClickSchool} >学校</li>
                            <li onClick={this.onClickDeviceDelivery}  >设备管理</li>
                            <li onClick={this.onClickSIMDelivery}  >SIM卡管理</li>
                            <li onClick={this.onClickDeviceSetMeal} >设备套餐</li>
                            <li onClick={this.onClickDeviceRetailPrice} className="select" >设备零售价</li>
                        </ul>
                    </div>
                    <DeviceRetailPrice onClickDeviceRetailPrice={this.onClickDeviceRetailPrice}/>
                </div>
            </div>
        );
    }
});
ReactDOM.render(
    <Main  otherData={otherData} priceData={priceData} />,
    document.getElementById('tableManage')
);
//设置main页面右边的最小宽度
/*$('.main-right', window.parent.document).css("minWidth","1274px");*/
$(".parentCheckBox").click(function(){
    if($(".parentCheckBox").is(":checked")){
        $(".childrenCheckBox").prop("checked",true);
    }else{
        $(".childrenCheckBox").attr("checked",false);
    }
});